<template>
  <div class="">
    <van-tabs v-model="active" @click="aa">
      <van-tab
        v-for="item in nav"
        :key="item.id"
        :name="item.id"
        :title="item.name"
      ></van-tab>
    </van-tabs>

    <van-loading v-if="show" type="spinner" color="#1989fa" />

    <div>
      <van-grid :border="false" :column-num="2">
        <van-grid-item
          v-for="(item, index) in list"
          :key="index"
          @click="tz(item)"
        >
          <!-- <van-image :src="item.list_pic_url"  /> -->
          <img style="width:100px" v-lazy="item.list_pic_url" alt="" />
          <div>{{ item.name }}</div>
          <div>{{ item.retail_price }}</div>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 1005000,
      list: [],
      nav: [],
      id: "",
      show: false,
    };
  },
  mounted() {
    this.$axios
      .get("http://shop.bufantec.com/bufan/category/categoryNav?id=1005001")
      .then((res) => {
        console.log(res);
        this.nav = res.data.navData;
      });
    this.shuju();
  },
  methods: {
    aa() {
      console.log(this.active);
      //   this.id = this.nav[this.active].id;
      //   console.log(this.id);
      this.shuju();
    },
    shuju() {
      this.show = true;
      this.$axios
        .get(
          "http://shop.bufantec.com/bufan/goods/goodsList?categoryId=" +
            this.active
        )
        .then((res) => {
          console.log(res.data.data);
          this.list = res.data.data;
          this.show = false;
        });
    },
    tz(item) {
      this.$router.push({ name: "detail", query: { item: item } });
    },
  },
  components: {},
};
</script>

<style lang="scss"></style>
